import { CLASS_INIT, CLASS_LOADED, CLASS_ERROR, lazyLoadCallback } from '../../js/lazyLoad.js'
import MemoPromise from '../../js/memoPromise.js'
import createProps from '../../js/createProps.js'

class Svg extends HTMLElement {
    constructor() {
        super()
        this.classList.add('u-svg')
        this.path = '/Content/icons/'
        this.source = ''
    }

    connectedCallback() {
        createProps(this)
        this.render()
    }

    render() {
        if (this.source === '') {
            console.error(
                `Error: source property is not set`
            )
            return
        }

        this.classList.add(CLASS_INIT)

        this.innerHTML = `<svg aria-hidden="true"></svg>`

        const self = this
        lazyLoadCallback(self, () => {
            self.fetchSVG(this.source, `${this.path}${this.source}.svg`)
        })
    }

    request(url) {
        return fetch(url)
    }

    async fetchSVG(icon, url) {
        const el = this.firstElementChild

        const memoPromise = new MemoPromise(this.request)
        const { request } = memoPromise

        let data = await request({ uniqueKey: icon, url })

        const parser = new DOMParser()
        const parsed = parser.parseFromString(data, 'image/svg+xml')

        let svg = parsed.getElementsByTagName('svg')

        if (!svg.length) {
            console.error(`Error: SVG not found ${this.path}${this.source}`)
            this.classList.add(CLASS_ERROR)
            return
        }

        this.classList.add(CLASS_LOADED)

        svg = svg[0]

        const attr = svg.attributes
        const attrLen = attr.length

        for (let i = 0; i < attrLen; ++i) {
            if (attr[i].specified) {
                if ('class' === attr[i].name) {
                    const classes = attr[i].value.replace(/\s+/g, ' ').trim().split(' ')
                    const classesLen = classes.length

                    for (let j = 0; j < classesLen; ++j) {
                        el.classList.add(classes[j])
                    }
                } else {
                    el.setAttribute(attr[i].name, attr[i].value)
                }
            }
        }

        // Now transfer over the children 
        // Note: IE does not assign an innerHTML property to SVGs, so we need to go node by node
        while (svg.childNodes.length) {
            el.appendChild(svg.childNodes[0])
        }
    }
}

customElements.get('u-svg') || customElements.define('u-svg', Svg)

export default Svg